<template>
  <div class="table-component">
    <!-- 基础表格组件 -->
    <div v-if="type === 'table-basic'" class="table-basic-component">
      <el-table
        :data="props.data"
        :columns="props.columns"
        :stripe="props.stripe"
        :border="props.border"
        :height="props.height"
        class="data-table"
        style="width: 100%"
      >
        <el-table-column
          v-for="column in props.columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align || 'center'"
        >
          <template #default="scope">
            <span :style="{ color: column.color || '#fff' }">
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 滚动表格组件 -->
    <div v-else-if="type === 'table-scroll'" class="table-scroll-component">
      <div class="scroll-container" :style="{ height: props.height || '100%' }">
        <div 
          class="scroll-content"
          :class="{ 'scroll-paused': isHovered && props.hoverStop }"
          :style="{ 
            transform: `translateY(${scrollOffset}px)`,
            transition: isHovered && props.hoverStop ? 'none' : 'transform 0.5s linear'
          }"
        >
          <el-table
            :data="scrollData"
            :columns="props.columns"
            :stripe="true"
            :border="false"
            class="scroll-table"
            style="width: 100%"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
          >
            <el-table-column
              v-for="column in props.columns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              :align="column.align || 'center'"
            >
              <template #default="scope">
                <span :style="{ color: column.color || '#fff' }">
                  {{ scope.row[column.prop] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  props: {
    type: Object,
    default: () => ({})
  }
})

// 滚动表格相关状态
const scrollOffset = ref(0)
const isHovered = ref(false)
let scrollInterval = null

// 计算滚动数据（复制数据以实现无缝滚动）
const scrollData = computed(() => {
  if (!props.props.data || props.props.data.length === 0) return []
  
  // 复制数据以实现无缝滚动
  const originalData = props.props.data
  const repeatedData = [...originalData, ...originalData]
  return repeatedData
})

// 处理鼠标进入
const handleMouseEnter = () => {
  isHovered.value = true
}

// 处理鼠标离开
const handleMouseLeave = () => {
  isHovered.value = false
}

// 开始滚动
const startScroll = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
  
  const step = props.props.step || 1
  const delay = props.props.delay || 3000
  
  scrollInterval = setInterval(() => {
    if (!isHovered.value || !props.props.hoverStop) {
      scrollOffset.value -= step
      
      // 当滚动到一半时重置位置，实现无缝滚动
      const maxOffset = -(props.props.data?.length || 0) * 40 // 假设每行高度40px
      if (scrollOffset.value <= maxOffset) {
        scrollOffset.value = 0
      }
    }
  }, delay)
}

// 监听数据变化
watch(() => props.props.data, () => {
  if (props.type === 'table-scroll') {
    scrollOffset.value = 0
    startScroll()
  }
}, { deep: true })

onMounted(() => {
  if (props.type === 'table-scroll') {
    startScroll()
  }
})

onUnmounted(() => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
})
</script>

<style scoped>
.table-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 基础表格样式 */
.table-basic-component {
  width: 100%;
  height: 100%;
}

.data-table {
  background: transparent;
}

:deep(.data-table .el-table) {
  background: transparent;
  color: #fff;
}

:deep(.data-table .el-table__header) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.data-table .el-table__header th) {
  background: rgba(64, 158, 255, 0.1);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.data-table .el-table__body tr) {
  background: transparent;
}

:deep(.data-table .el-table__body tr:hover) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.data-table .el-table__body td) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

:deep(.data-table .el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: rgba(255, 255, 255, 0.05);
}

/* 滚动表格样式 */
.table-scroll-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  width: 100%;
}

.scroll-content.scroll-paused {
  transition: none;
}

.scroll-table {
  background: transparent;
}

:deep(.scroll-table .el-table) {
  background: transparent;
  color: #fff;
}

:deep(.scroll-table .el-table__header) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.scroll-table .el-table__header th) {
  background: rgba(64, 158, 255, 0.1);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.scroll-table .el-table__body tr) {
  background: transparent;
}

:deep(.scroll-table .el-table__body tr:hover) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.scroll-table .el-table__body td) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

:deep(.scroll-table .el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: rgba(255, 255, 255, 0.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.data-table .el-table__header th),
  :deep(.data-table .el-table__body td),
  :deep(.scroll-table .el-table__header th),
  :deep(.scroll-table .el-table__body td) {
    padding: 8px 4px;
    font-size: 12px;
  }
}
</style> 